<template>
	<view class="page-index">
		<u-navbar @rightClick="rightClick" :autoBack="true" fixed :placeholder="true">
			<u--input slot="left" placeholder="卧室" prefixIcon="search" shape="circle"
				prefixIconStyle="font-size: 22px;color: #909399">
			</u--input>
		</u-navbar>

		<view class="grid-container">
			<u-grid :border="false" :col="4">
				<u-grid-item v-for="(item,index) in baseList" :key="index">
					<img :src="item.name" alt="" srcset="">
					<text class="grid-text">{{item.title}}</text>
				</u-grid-item>
			</u-grid>
		</view>

		<view class="card-container">
			<custom-waterfalls-flow ref="waterfallsFlowRef" @wapperClick="wapperClick" @imageClick="wapperClick" :columnSpace="1"
				:value="list" :listStyle="{boxShadow:'0px 0px 12px rgba(0, 0, 0, .07)'}">
				<view class="item" v-for="(item,index) in list" :key="index" slot="slot{{index}}">
					<view class="title">{{item.name}}</view>
					<view class="desc">{{item.desc}}</view>
				</view>
			</custom-waterfalls-flow>
			<u-loadmore :status="status" loadingText="空间加载中..." />
		</view>
	</view>
</template>

<script>
	// https://ext.dcloud.net.cn/plugin?id=7594 瀑布流
	import {
		cloneDeep
	} from 'loadsh'
	import {
		workListApi
	} from '@/api'
	export default {
		onLoad() {
			this.getWorkList()
		},
		data() {
			return {
				status: 'loading',
				baseList: [{
						name: require('@/static/svg/catalog.svg'),
						title: '分类'
					},
					{
						name: require('@/static/svg/art.svg'),
						title: '艺术'
					},
					{
						name: require('@/static/svg/company.svg'),
						title: '公司'
					}, {
						name: require('@/static/svg/school.svg'),
						title: '学校'
					}
				],
				list: []
			}
		},
		onReachBottom() {
			this.getWorkList()
		},
		methods: {
			wapperClick(e) {
				uni.navigateTo({
					url: `/pages/detail/detail?id=${e.id}&name=${e.name}`
				})
			},
			getWorkList() {
				workListApi({}).then(res => {
					this.list.push(...res.data.map((item => {
						item.image = item.cover
						return item
					})))
					if (this.list.length == res.total) {
						this.status = 'nomore'
					}
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	::v-deep {
		.u-grid {
			// height: 100rpx;
		}
	}

	.page-index {
		.grid-container {
			padding: 40rpx 0;

			img {
				width: 70rpx;
				height: 70rpx;
			}

			.grid-text {
				color: $uni-text-color;
				margin-top: 15rpx;
			}
		}

		.card-container {
			background-color: $uni-bg-color-grey;
			padding: 20rpx;

			.item {
				padding: 20rpx;
			}
		}
	}
</style>
